<!--
 * tab的操作菜单
 *
 * @author Junpeng.Li
 * @date 2022-4-8 15:26:55
 *
 * 自定义事件：
 *   - insert(data, index): 点击复制时的回调函数
 *   - remove(index): 点击关闭时的回调函数，包含关闭当前、关闭右侧、关闭所有
 *   - rename(name, index): 点击重命名时的回调函数
-->
<template>
    <div style="display: inline-block;position: relative;">
        <!-- 操作菜单 -->
        <el-dropdown
                trigger="click"
                size="medium"
                @command="handleCommand"
        >
            <i class="el-icon-menu el-icon--right" style="color: #409EFF"></i>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="copy">复制SSH渠道</el-dropdown-item>
                <el-dropdown-item command="closeNow" divided>关闭当前标签</el-dropdown-item>
                <el-dropdown-item command="closeRight">关闭右侧标签</el-dropdown-item>
                <el-dropdown-item command="closeAll">关闭所有标签</el-dropdown-item>
                <el-dropdown-item command="rename" divided>重命名</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

        <!-- 重命名 -->
        <el-dialog
            title="重命名"
            :visible.sync="renameDialog.visible"
            append-to-body
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="500px"
        >
            <p style="color: #909399">在选项卡中输入用户定义的名称，留空将使用默认名称。</p>
            <p>新名称：</p>
            <el-input v-model="renameDialog.name"/>

            <div slot="footer">
                <el-button type="primary" @click="onSaveRename">确 定</el-button>
                <el-button @click="onCancelRename">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import { getOne as getSession } from '@/api/session-api'

    export default {
        name: "tab-menu",

        props: {

            /**
             * 所有tab页中的终端组件
             */
            terminals: {
                type: Array,
                default: () => []
            },

            /**
             * 连接信息
             */
            connInfo: {
                type: Object,
                default: () => {}
            }

        },

        data() {
            return {

                terminal: null,

                index: -1,

                /**
                 * 重命名dialog相关数据
                 */
                renameDialog: {
                    visible: false,

                    name: null
                }

            }
        },

        mounted() {
            for (let i = 0; i < this.terminals.length; i++) {
                const terminal = this.terminals[i]
                if (terminal.$vnode.key === this.$vnode.key) {
                    this.terminal = terminal
                    this.index = i
                    break
                }
            }
        },

        methods: {

            /**
             * 处理menu点击事件
             */
            handleCommand(command) {
                switch (command) {
                    case 'copy':
                        this.onCopy()
                        break;
                    case 'closeNow':
                        this.onCloseNow()
                        break;
                    case 'closeRight':
                        this.onCloseRight()
                        break;
                    case 'closeAll':
                        this.onCloseAll()
                        break;
                    case 'rename':
                        this.onRename()
                        break;
                }
            },

            /**
             * 复制
             */
            onCopy() {
                this.$emit('insert', this.terminal.$props.connInfo, this.index)
            },

            /**
             * 关闭当前标签页
             */
            onCloseNow() {
                this.terminal.close()
                if (this.terminals.length === 1) {
                    this.terminal.reset()
                }

                this.$emit('remove', this.index)
            },

            /**
             * 关闭右侧标签页
             */
            onCloseRight() {
                // 右侧没有标签
                if (this.terminals.length - 1 === this.index) {
                    return
                }

                for (let i = this.terminals.length - 1; i > this.index; i--) {
                    const terminal = this.terminals[i]
                    terminal.close()

                    this.$emit('remove', i)
                }
            },

            /**
             * 关闭所有标签页
             */
            onCloseAll() {
                // 只有一个
                if (this.terminals.length === 1) {
                    this.onCloseNow()
                    return
                }

                for (let i = this.terminals.length - 1; i >= 0; i--) {
                    const terminal =  this.terminals[i]
                    terminal.close()

                    if (terminal.$vnode.key === this.$vnode.key) {
                        continue
                    }

                    this.$emit('remove', i)
                }

                this.$emit('remove', 0)
            },

            /**
             * 重命名
             */
            onRename() {
                this.renameDialog = {
                    visible: true,
                    name: this.connInfo.name
                }
            },

            /**
             * 保存重命名的结果
             */
            onSaveRename() {
                if (this.renameDialog.name) {
                    this.$emit('rename', this.renameDialog.name, this.index)
                } else {
                    // 重新获取一下连接信息拿到旧的标签名
                    const _terminal = getSession(this.terminal.$props.connInfo.id)
                    this.$emit('rename', _terminal.name, this.index)
                }

                this.onCancelRename()
            },

            /**
             * 取消关闭重命名对话框
             */
            onCancelRename() {
                this.renameDialog.visible = false
            }

        }
    }
</script>

<style scoped>

</style>
